
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

final List<String> imgList = [
  'http://img3.tuwandata.com/uploads/play2/banner/1283921678426770.jpg',
  'http://img3.tuwandata.com/uploads/play2/banner/1114751677837546.jpg',
  'http://img3.tuwandata.com/uploads/play2/banner/1955231677462252.jpg',
  'http://img3.tuwandata.com/uploads/play2/banner/1137391676889167.jpg',
  'http://img3.tuwandata.com/uploads/play2/banner/1732401677754763.jpg'
];


class ChatBanner extends StatefulWidget {
  const ChatBanner({Key? key}) : super(key: key);

  @override
  State<ChatBanner> createState() => _ChatBannerState();
}

class _ChatBannerState extends State<ChatBanner> {

  final CarouselController _controller = CarouselController();
  int _current = 0;

  final List<Widget> imageSliders = imgList
      .map((item) => SizedBox(
    width: 345.r,
    child: Image.network(item, fit: BoxFit.fill),
  ))
      .toList();

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(5)),
        child:Stack(
          alignment: Alignment.center,
          children: [
            SizedBox(
              width: 345.r,
              height: 80.r,
              child: CarouselSlider(
                carouselController: _controller,
                items: imageSliders,
                options: CarouselOptions(
                  height: 80.r,
                  autoPlay: true,
                  viewportFraction:1.0,
                  onPageChanged: (index, reason){
                    setState(() {
                      _current = index;
                    });
                  },
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: imgList.asMap().entries.map((entry) {
                  return GestureDetector(
                    onTap: () => _controller.animateToPage(entry.key),
                    child: Container(
                      width: 6.r,
                      height: 6.r,
                      margin: EdgeInsets.symmetric(vertical: 3.r, horizontal: 4.r),
                      decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: (Theme.of(context).brightness == Brightness.dark
                              ? Colors.white
                              : Colors.black)
                              .withOpacity(_current == entry.key ? 0.4 : 0.2)),
                    ),
                  );
                }).toList(),
              ),)
          ],
        )
    );

  }
}




